import eventBus from '../../eventBus'
import { debounce } from '../../utils'
import defaultUrl from '../../assets/default.gif'

let imgs = [] // 数组

/**
 * 拿到图片的信息
 * 处理完直接移除
 * @param img{dom: dom元素,src: src地址}
 */
function setImg (img) {
  img.dom.src = defaultUrl // 默认图片设置使用
  // 如何处理图片
  const clientHeight = document.documentElement.clientHeight // 视口高度
  const rect = img.dom.getBoundingClientRect() // 当前元素的信息
  const minHeight = rect.height || 150 // 图片的最小高度，因最开始是不加载
  if (rect.top >= -minHeight || rect.top <= clientHeight) {
    // 在视口范围内
    const tempImg = new Image() // 建立图片对象
    tempImg.onload = function () {
      // 当真实图片加载完成后
      img.dom.src = img.src
    }
    tempImg.src = img.src // 在浏览器缓存图片
    /**
     * 消失时触发
     */
    imgs = imgs.filter((item) => item !== img)
  }
}

// 设置合适的图片

function setImages () {
  if (!imgs || imgs.length === 0) {
    return
  }
  for (const img of imgs) {
    setImg(img)
  }
}

/**
 * 主区域滚动事件触发
 * @param dom
 */
function handleScroll (dom) {
  setImages()
}

// 防抖，意为防止不停的触发
const ds = debounce(handleScroll, 100)

eventBus.$on('mainScroll', ds)

export default {
  /**
   * 像数组添加懒加载的元素和地址
   * @param el dom元素
   * @param bindings
   */
  inserted (el, bindings) {
    imgs.push({
      dom: el,
      src: bindings.value
    })
  }
}
